<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>宠爱小家</title>

    <!-- Favicons -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.ico}">

    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">
    <script th:src="@{/assets/js/jquery-3.2.1.slim.min.js}"></script>
    <script th:src="@{/assets/js/vendor.min.js}"></script>
    <script th:src="@{/assets/js/plugins.min.js}"></script>

    <!--Main JS-->
    <script th:src="@{/assets/js/main.js}"></script>
    <script th:src="@{/assets/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/axios.min.js}"></script>

</head>

<body>


<!-- 头部信息+菜单栏 -->
<div class="header section" th:replace="~{common/head::head}"></div>
<!-- Header Section End -->

<!-- 宠物社区 -->
<div class="section breadcrumb-area bg-name-bright">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="breadcrumb-wrapper">
                    <h2 class="breadcrumb-title">宠物社区</h2>
                    <ul>
                        <li><a href="/goods/show">首页</a></li>
                        <li>宠物社区</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcrumb Area End -->

<!-- 主体内容区 -->
<div id="dynamic" class="section section-margin">

    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-12">


                <div><a href="/addDynamic.html" class="btn btn-hover-dark"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>发表动态</a></div>&nbsp;&nbsp;&nbsp;&nbsp;
                <!--shop toolbar start-->
                <div class="shop_toolbar_wrapper flex-column flex-md-row p-2 m-b-40 ">

                    <!-- Shop Top Bar Left start -->
                    <div>
                        <ul class="nav nav-tabs">
                            <li id="specila" role="presentation" style="font-size: 36px;width:160px;text-align: center" class="active"><a href="javascrirp:void(0)" @click="special">精选</a></li>
                            <li id="cat" role="presentation" style="font-size: 36px;width:160px;text-align: center"><a href="javascrirp:void(0)" @click ="cat1">喵星球</a></li>
                            <li id="dog" role="presentation" style="font-size: 36px;width:160px;text-align: center"><a href="javascrirp:void(0)" @click ="dog">汪星球</a></li>
                        </ul>

                    </div>
                    <!-- Shop Top Bar Left end -->

                    <!-- 板块右边下拉框 -->
                    <div class="shop-top-bar-right">
                        <h4 class="title m-r-10">排序方式: </h4>

                        <div class="shop-short-by">
                            <select id="order" class="nice-select" aria-label=".form-select-sm example" @change="search2" >
                                <option value="0">默认排序</option>
                                <option value="1">按最近时间</option>
                                <option value="2">按最多浏览</option>
                            </select>
                        </div>
                    </div>
                    <!-- Shopt Top Bar Right End -->

                </div>
                <!--shop toolbar end-->

                <!-- Shop Wrapper Start -->
                <div class="row shop_wrapper grid_list">

                    <!-- 单条动态 -->
                    <div class="col-12 product" v-for="d in dynamicList">
                        <div class="product-inner">
                            <div class="thumb">
                                <a :href="'/dynamic/queryDynamic?DynamicId='+d.dynamicId" class="image">
                                    <img class="fit-image" :src="'http://localhost:8080/uploadFile/dynamic/'+d.dynamicCover" alt="Product" />
                                </a>
                                <div class="action-wrapper">
                                    <a href="/dynamic/queryDynamic" class="action quickview" data-bs-toggle="modal" data-bs-target="#quick-view" title="Quickview"><i class="ti-plus"></i></a>
                                    <a href="wishlist.html" class="action wishlist" title="Wishlist"><i class="ti-heart"></i></a>
                                    <a href="cart.html" class="action cart" title="Cart"><i class="ti-shopping-cart"></i></a>
                                </div>
                            </div>

                            <div class="content">
                                <h5 class="title"><a :href="'/dynamic/queryDynamic?DynamicId='+d.dynamicId">{{d.dynamicTitle}}</a></h5>
                                <p>
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;{{d.createTime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>&nbsp;&nbsp;{{d.viewNumber}}
                                </p>
                                <div style="height: 150px ; ">
                                    <a :href="'/dynamic/queryDynamic?DynamicId='+d.dynamicId" style="font-size: 15px">{{d.shortContent}}</a>
                                </div>

                                <p class="title">来自：<a :href="'/dynamic/findDynamicUser?userId='+d.userId" style="color: #0a58ca">{{d.userName}}</a>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <a>
                                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>&nbsp;&nbsp;
                                    </a>{{d.commentNumber}}
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- Single Product End -->


                </div>
                <!-- Shop Wrapper End -->

                <!--shop toolbar start-->
                <div class="shop_toolbar_wrapper justify-content-center m-t-50">

                    <!-- 分页 -->
                    <div class="shop-top-bar-right">
                        <nav>
                            <ul class="pagination">
                                <li class="page-item">
                                    <a class="page-link rounded-0" href="javascript:void(0)" aria-label="Pre" @click="goPrePage()">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                <li class="page-item" v-for="index of pages" :key="index" @click="go(index)"><a class="page-link" href="javascript:void(0)">{{index}}</a></li>
                                <li class="page-item">
                                    <a class="page-link rounded-0" href="javascript:void(0)" aria-label="Next" @click="goNextPage()">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!-- Shopt Top Bar Right End -->

                </div>
                <!--shop toolbar end-->
            </div>

            <!--侧边栏-->
            <div class="col-lg-3 col-12">
                <!-- Sidebar Widget Start -->
                <aside class="sidebar_widget m-t-50 mt-lg-0">
                    <div class="widget_inner">
                        <div class="widget-list m-b-50">
                            <h3 class="widget-title m-b-30">搜索</h3>
                            <div class="search-box">
                                <input type="text" class="form-control" v-model="like" placeholder="输入用户名或文章标题查看更多" aria-label="Search Our Store">
                                <button class="search-icon" type="button" @click="search()">
                                    <i class="icon-magnifier"></i>
                                </button>
                            </div>
                        </div>

                        <div class="widget-list m-b-50">
                            <h3 class="widget-title m-b-30">精选博主</h3>
                            <div class="sidebar-body">
                                <table  style="width: 300px;font-size: 20px">
                                    <tr v-for="u in attentionList">
                                        <td><a :href="'/dynamic/findDynamicUser?userId='+u.userId">{{u.userName}}</a></td>
                                        <td>
                                            <button  class="btn btn-default btn-sm" @click="change(u.userId)" type="submit" style="font-size: 15px"><span :id = "u.userId" class="glyphicon glyphicon-heart-empty" aria-hidden="true">关注</span></button>
                                        </td>
                                    </tr>

                                </table>

                            </div>
                        </div>
                    </div>
                </aside>
                <!-- Sidebar Widget End -->
            </div>
        </div>
    </div>
</div>
<!-- Shop Section End -->

<!-- 页末信息 -->
<footer class="section footer-section" th:replace="~{common/foot::foot}"></footer>



<script>
    function changeAttention(isAttention,id){
        $.ajax({
            url:"/dynamic/changeAttention",
            type:"get",
            dataType:"json",
            data:{
                isAttention:isAttention,
                attentionUserId:id
            },
            success:function (response) {
                alert(response.message)
            }
        })
    }

    new Vue({
        el:"#dynamic",
        data(){
            return{
                pageNum:"",
                pageSize:"",
                plateId:"",
                like:"",
                order:"",
                dynamicList:[],
                pages:"",
                attentionList:[],
                userId:"",
                isAttention:"",
                prePage:"",
                nextPage:"",
                addFormView:false,
                imageUrl:'',
                addForm:{
                    dynamicTitle:'',
                    plateId:'',
                    contentText:'',
                    dynamicCover:'',
                },
                rules: {
                    dynamicTitle: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'}
                    ],
                    plateId: [
                        {type:Number, required: true, message: '请输入商品名称', trigger: 'blur'}
                    ],
                    contentText: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'}
                    ],
                    dynamicCover: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'}
                    ],
                }
            }
        },created(){
            this.search();
            this.showCelebrity();

        },
        methods:{
            search(){
                axios.get("/dynamic/dynamicList",{
                    params:{
                        pageNum: this.pageNum,
                        plateId: this.plateId,
                        pageSize:this.pageSize,
                        like:this.like,
                        order:this.order,

                    }
                }).then((res)=>{

                    this.dynamicList=res.data.data.list;
                    this.pageNum=res.data.data.pageNum
                    this.pages=res.data.data.pages;
                    this.prePage=res.data.data.prePage
                    this.nextPage=res.data.data.nextPage

                })
            },
            search2(){
                this.order = $("#order").val()
                console.log(this.order);
                this.search();
            },
            special(){
                this.plateId = 3
                this.search()
                $("#specila").addClass("active")
                $("#cat").removeClass("active")
                $("#dog").removeClass("active")

            },

            cat1(){

                this.plateId = 2
                this.search()
                $("#cat").addClass("active");
                $("#specila").removeClass("active");
                $("#dog").removeClass("active");
            },
            dog(){
                this.plateId = 1
                this.search()
                $("#dog").addClass("active")
                $("#specila").removeClass("active")
                $("#cat").removeClass("active")
            },
            goNextPage(){
                this.pageNum=this.nextPage
                this.search()
            },
            goPrePage(){
                this.pageNum=this.prePage
                this.search()
            },
            go(num){
                this.pageNum=num
                this.search()
            },

            showCelebrity(){
                axios.get("/dynamic/attentionUsers").then((response)=>{
                    console.log(response);
                    this.attentionList = response.data.data
                })
            },
            change(u) {
                let span = $("#"+u);
                if (span.text()=="取消关注"){
                    span.removeClass("glyphicon glyphicon-heart")
                    span.addClass("glyphicon glyphicon-heart-empty")
                    span.text("关注")
                    changeAttention(1,u);
                }else if(span.text()=="关注"){
                    span.removeClass("glyphicon glyphicon-heart-empty")
                    span.addClass("glyphicon glyphicon-heart")
                    span.text("取消关注")
                    changeAttention(0,u)
                }
            }




        }
    })

</script>
</body>

</html>